<template>
	<view class="pages">
		<view class="title _paddingTop">
			召回查询检测
		</view>
		<view class="_marginTop" style="border: 1px solid #eee; border-radius: 15rpx;">
			<view class="_flex align-items_center">
				<image src="../../static/car_report.png" style="width: 60rpx;height: 60rpx;margin: 20rpx;"
					mode="aspectFit"></image>
				<view class="" style="font-weight: bold;">
					车辆基础信息
				</view>
			</view>
			<view class="" style="padding:0 20rpx;">
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">品牌型号</text>
					<text>{{ zhInfoDetail.pp || '比亚迪' }} {{ zhInfoDetail.cx  || '汉' }}</text>
				</view>
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">款型</text>
					<text>{{ zhInfoDetail.nk || '2021'}}款 {{ zhInfoDetail.cxing || 'EV四驱高性能车' }}</text>
				</view>
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">VIN码</text>
					<text>{{ zhInfoDetail.vinq || 'WP0AA2Y19MSA10081' }}</text>
				</view>
			</view>
		</view>
		<view class="_marginTop" style="    border: 1px solid #eee; border-radius: 10rpx;">
			<view class="_flex align-items_center">
				<image src="../../static/car_complaints.png" style="width: 60rpx;height: 60rpx;margin: 20rpx;"
					mode="aspectFit"></image>
				<view class="" style="font-weight: bold;">
					召回记录
				</view>
			</view>
			<view style="padding-left: 36rpx; padding-right:26rpx; box-sizing: border-box;">
				<u-time-line v-for="(item,index) in zhInfoDetail.list" :key="index">
					<u-time-line-item nodeTop="2">
						<template v-slot:node>
							<view class="u-node" style="background: #002a58;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="_flex _justify_between">
									<view class="u-order-title">{{item.name}}</view>
								</view>
								<view class="u-order-desc">
									<u-read-more :toggle="true" :shadow-style="shadowStyle" :show-height="100"
										text-indent="0" close-text="更多" color='#002a58' v-if="item.value.length > 35">
										<rich-text :nodes="item.value"></rich-text>
									</u-read-more>
									<view class="" v-else>
										{{item.value}}
									</view>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	import API from '@/api/query.js'

	export default {
		data() {
			return {
				paramVin: '',
				zhInfoDetail: {}
			}
		},
		methods: {
			getzhQuery() {
				API.getzhQuery({
					vin: this.paramVin
				}).then(res => {
					console.log(res)
					this.zhInfoDetail = res.data
				})
			},
			// getZhInfo() {
			// 	let token = uni.getStorage({
			// 		token: token
			// 	})
			// 	GET.getZhInfo({
			// 		token
			// 	}).then(res => {
			// 		console.log(res.data)
			// 		// this.zhInfoDetail.createTime = res.data.createTime
			// 		// console.log(this.zhInfoDetail.createTime)

			// 	})
			// },
		},
		onLoad(options) {
			this.paramVin = options.vin
		},
		onShow() {
			this.getzhQuery()
			// this.getZhInfo()
		}
	}
</script>

<style scoped>
	._marginTop {
		background-color: #fff;
		border-radius: 10px;
	}

	.title {
		color: #002B56;
		font-size: 46rpx;
		font-weight: bold;
	}

	.carBaseName {
		color: #888;
		display: inline-block;
		width: 200rpx;
	}

	.batteryBox {
		width: 50%;
		line-height: 52rpx;
	}

	.dataBgColDark {
		background-color: #002A58;
		height: 50rpx;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
	}

	.dataBgCol {
		background-color: #E5E5E5;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.table .nameTd {
		background-color: #F8FAFF;
	}

	/* 时间轴 */
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-desc text.more {
		color: #002B56;
		margin-left: 10rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
